import React, { useState } from 'react'

export default function App() {

    const [obj, setObj] = useState({
        x: 0,
        y: 0,
        w: 100,
        h: 100
    })

    function mouseMove(event) {
        console.log(event.clientX, event.clientY);

        // 鼠标移动的时候发现 w 和 h 的数据丢失了
        // 因为 { x: 1, y: 1 } 会替代掉原来的 obj，所以 w 和 h 无了
        // setObj({
        //     x: event.clientX,
        //     y: event.clientY
        // })

        // 如果属性很多的情况下，这么写太过于费体力
        // 而且无关数据被重新赋值了多次，消耗性能
        // setObj({
        //     x: event.clientX,
        //     y: event.clientY,
        //     w: 100,
        //     h: 100
        // })

        // 该方法可以实现功能
        // 如果该对象中有几十个属性，那么一样非常消耗性能
        setObj({
            ...obj,
            x: event.clientX,
            y: event.clientY,
        })


    }

    return (
        <div onMouseMove={mouseMove} style={{ width: '100vw', height: '100vh' }}>
            <div>
                宽：{obj.w}  ----- 高：{obj.h}
            </div>
            <div>
                x：{obj.x}  ----- y：{obj.y}
            </div>
        </div>
    )
}
